/*
 * @Author: mayijun
 * @Date: 2022-05-24 11:07:20
 * @LastEditors: mayijun
 * @LastEditTime: 2022-05-26 11:11:37
 */
//页面筛选条件组件
import API from '@/services';
import { ElDatePicker, ElFormItem, ElInput } from 'element-plus';
import {
  defineComponent,
  onMounted,
  PropType,
  reactive,
  ref,
  watch
} from 'vue';
import TableSearchSelect from '../TableSearchSelect';

const PageFilter = defineComponent({
  name: 'PageFilter',
  components: {},
  props: {
    selectData: {
      type: Object,
      default: () => { }
    },
    pageSettings: {
      type: Object,
      default: () => { }
    },
    searchForm: {
      type: Object,
      default: () => { }
    }
  },
  emits: ['searchForm'],
  setup: (props, { slots, attrs, emit }) => {

    const search = () => {
      emit('searchForm');
    }
    const state = reactive({

    });

    const filterRender = () => {
      const { selectData, pageSettings, searchForm } = props;
      if (pageSettings.type == "input") {
        return (
          <ElInput
            v-model={searchForm[pageSettings.prop]}
            style={{ width: '100%' }}
            placeholder={"请输入"}
            clearable
            size="large"
            onChange={search}
          ></ElInput>)
      } else if (pageSettings.type == "select") {
        return (
          <TableSearchSelect
            {...selectData}
            v-model={[searchForm[pageSettings.prop], 'modelVal']}
            style={{ width: '100%' }}
            selectConfig={{
              multiple: selectData?.isMultiple ? true : false,
              collapseTags: selectData?.isMultiple ? true : false,
              collapseTagsTooltip: selectData?.isMultiple ? true : false,
              onChange: () => search()
            }}
          />
        )
      } else if (pageSettings.type == "dateRange") {
        return (
          <el-date-picker
            v-model={searchForm[pageSettings.prop]}
            type="daterange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD"
            onChange={search}
          ></el-date-picker>)
      }
    }

    return () => {

      return filterRender();

    };
  }
});

export default PageFilter;
